<template>
	<view>
		<view >
			<image src="/static/img/avatar3.png" class="smart-avatar" @longpress="shiftChat"></image>
		</view>
		<!-- 听 -->
		<view v-if="!is_speak">
			<!-- 底部 -->
			<view class="loading-box">
				<view class="long-dot"></view>
				<view class="dot"></view>
				<view class="long-dot"></view>
			</view>
			<view class="text-tip" >
				I am listening...
			</view>
		</view>
		<!-- 说 -->
		<view v-else>
			<view class="loading-box">
				<view class="fat-dot"></view>
				<view class="text-tip" style="margin: 0.55rem 0.2rem;">
					I am speaking...
				</view>
			</view>
		</view>
	</view>
	<CustomTabBar />
</template>

<script setup lang="ts">
	import {ref} from 'vue'
	import CustomTabBar from '@/components/CustomTabBar.vue';
	
	const is_speak = ref(false)
	
	const shiftChat =()=>{
		is_speak.value = !is_speak.value
	}
</script>

<style scoped lang="scss">
	.smart-avatar {
		position: absolute;
		top: 20%;
		margin-left: calc(50% - 6.25rem);
		width: 12.5rem;
		height: 12.5rem;
		/* background: linear-gradient(180deg, rgba(255,255,255,0.47) 0%,rgba(255,255,255,1) 100%);
	   box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(0,0,0,0.4);*/
	}

	.loading-box {
		display: flex;
		position: absolute;
		top: 75%;
		left: calc(50% - 1.625rem);
	}

	@keyframes squeeze {

		0%,
		100% {
			transform: scaleY(1);
			/* 初始状态 */
		}

		50% {
			transform: scaleY(0.7);
			/* 压缩状态 */
		}

		70% {
			transform: scaleY(1.1);
		}

		80% {
			transform: scaleY(0.85);
		}
	}

	.long-dot {
		width: 0.75rem;
		height: 1.56rem;
		border-radius: 0.5rem;
		background-color: rgba(255, 255, 255, 1);
		border: 0.06rem solid rgba(222,134,143,0.58);
		margin-right: 0.7rem;
		animation: squeeze 1s infinite;/* long-dot的动画周期为0.5秒 */
		transform-origin: center;/* 确保变换基于中心点 */
	}

	.dot {
		width: 0.75rem;
		height: 0.81rem;
		border-radius: 0.5rem;
		background-color: rgba(255, 255, 255, 1);
		border: 0.06rem solid rgba(222,134,143,0.58);
		margin-right: 0.7rem;
		margin-top: 0.25rem;
		animation: squeeze 1s infinite;
		transform-origin: center;
		animation-delay: -0.2s;/* dot动画比long-dot早0.5秒开始 */
		
	}
	.fat-dot{
		margin-left:1rem;
		margin-bottom: 1.2rem;
		width: 1.19rem;
		height: 1.13rem;
		border-radius: 0.5rem;
		background-color: rgba(255,255,255,1);
		border: 0.06rem solid rgba(222,134,143,0.58);
		animation: squeeze 0.75s infinite;
		transform-origin: center;
	}
	.text-tip {
		position: absolute;
		width: 8rem;
		height: 1.44rem;
		text-align: center;
		line-height: 1.44rem;
		color: rgba(16, 16, 16, 0.8);
		font-size: 1rem;
		text-align: left;
		top: 80%;
		left: calc(50% - 3rem);
	}
</style>